<template>
  <div class="order">
    <order-header :title='title'>
      <template v-slot:tip>
        <span>{{tip}}</span>
      </template>
    </order-header>
    <router-view></router-view>
    <service-bar></service-bar>
    <nav-footer></nav-footer>

  </div>
</template>

<script>
import ServiceBar from '../components/ServiceBar.vue'
import NavFooter from '../components/NavFooter.vue'
import OrderHeader from '../components/OrderHeader.vue'

export default {
  name: 'order',
  components: {
    NavFooter,
    ServiceBar,
    OrderHeader,
  },
  // 定义属性
  data () {
    return {
      title: '',
      tip: '',
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {

  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    let path = this.$route.path
    if (path == '/order/confirm') {
      this.title = '订单确认'
      this.tip = '请填写订单信息'
    } else if (path == '/order/list') {
      this.title = '订单列表'
      this.tip = '请谨防钓鱼链接或诈骗电话，了解更多>'
    } else if (path == '/order/pay') {
      this.title = '订单支付'
      this.tip = '请谨防钓鱼链接或诈骗电话，了解更多>'
    }
    console.log(path);
  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='stylus' scoped></style>